<template>
    <div :id="props.id"
         :style="{width: props.width, height: props.height}"
    ></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import {onMounted, onUnmounted, defineProps} from 'vue';

export interface PieInterface {
    title: string;
    subtext: string;
    yData: number[];
}

const props = defineProps({
    id: {
        type: String,
        default: 'line'
    },
    theme: {
        type: String,
        default: '' // dark
    },
    width: {
        type: String,
        default: '100%'
    },
    height: {
        type: String,
        default: '100%'
    },
    data: {
        type: Object,
        default: () => {
            return {
                title: '',
                subtext: '',
                yData: [

                ]
            }
        }
    },
    option: {
        type: Object,
        default: () => {
            return {
                title: {
                    text: 'Referer of a Website',
                    subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: '50%',
                        data: [
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0,58,255,0.5)'
                            }
                        }
                    }
                ]
            }
        }
    }
});

onMounted(() => {
    init()
});

function init() {
    const basicBar = echarts.init(document.getElementById(props.id), props.theme);
    props.option.title.text = props.data.title;
    props.option.title.subtext = props.data.subtext;
    props.option.series[0].data = props.data.yData;
    basicBar.setOption(props.option);
}

function resize() {
    const basicBar = echarts.init(document.getElementById(props.id), props.theme);
    basicBar.resize();
}

onMounted(() => {
    window.addEventListener('resize', resize);
});

onUnmounted(() => {
    window.removeEventListener('resize', resize);
});

function refreshChart(data: PieInterface) {
    const basicBar = echarts.init(document.getElementById(props.id), props.theme);
    props.option.title.text = data.title;
    props.option.title.subtext = data.subtext;
    props.option.series[0].data = data.yData;
    basicBar.setOption(props.option);
}

defineExpose({
    refreshChart
});


</script>

<style scoped>

</style>
